
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--http://localhost:8080/liuzhuangzhuang/product.html-->
<title>Insert title here</title>
<link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
<script src="lib/layui/layui.js"></script>
</head>
<body>
	<div id="recommend_div" style="display: none;">
		<form id="form_updateRecommend" class="layui-form"
			lay-filter="huixian" style="">
			<input id="id" name="id" type="hidden">
			<div class="layui-form-item">
				<label class="layui-form-label">推荐位</label>
				<div class="layui-inline">
					<input type="text" name="position" lay-verify="title"
						autocomplete="off" class="layui-input">

				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重</label>
				<div class="layui-inline">
					<input type="text" name="weight" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-inline">
					<input type="text" name="p_name"
						class="layui-btn layui-btn-disabled" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品价格</label>
				<div class="layui-inline">
					<input type="text" name="p_price"
						class="layui-btn layui-btn-disabled" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品图片</label>
				<div class="layui-inline">
					<input type="text" name="p_img"
						class="layui-btn layui-btn-disabled" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" id="anNiu" class="layui-btn" lay-submit=""
						lay-filter="updateRecommend">修改</button>

				</div>
			</div>
		</form>
	</div>



	<div>
		<form class="layui-form" onsubmit="return false;">


			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">商品名: </label>
					<div class="layui-input-inline">
						<input type="tel" id="p_name" name="p_name" placeholder="请输入商品名"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">价格: </label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="beginPrice" name="beginPrice"
							placeholder="起始价" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="endPrice" name="endPrice" placeholder="最高价"
							autocomplete="off" class="layui-input">
					</div>



					<div class="layui-inline">
						<label class="layui-form-label">推荐类别</label>
						<div class="layui-input-block">
							<select id="position" name="position" lay-filter="aihao">
								<option value=""></option>
								<option value="推荐位A">推荐位A</option>
								<option value="推荐位B">推荐位B</option>


							</select>
						</div>
					</div>

					<div class="layui-inline">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit=""
								lay-filter="souSuo">搜索</button>
						</div>
					</div>
				</div>
		</form>
	</div>


	<table id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script>
	layui.use(['table','layer','form'], function(){
	  var table = layui.table;
	  var layer = layui.layer;
	  var form = layui.form;
	  var $ = layui.$;
  	//第一个实例
	  table.render({
	    elem: '#demo'
	    ,id:"recommend"
	   	,url: '../getRemmend'  //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	    	 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
	          ,{field: 'position', title: '推荐位置', }
	          ,{templet:'<div>{{d.product.p_name}}</div>',  title: '推荐商品名称'}
	          ,{templet:'<div><img src="../img/{{d.product.p_img}}" style="width:70px" /> </div>',  title: '推荐商品价格'}
	          ,{templet:'<div>{{d.product.p_price}}</div>',  title: '推荐商品名称'}
	          ,{field: 'weight', title: '权重', width: 135, sort: true,edit:"text"}
	          ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'} 
	    ]]
	  });  
	  form.on("submit(souSuo)",function(data){
			//这里以搜索为例
			table.reload("recommend",{
			  where: { //设定异步数据接口的额外参数，任意设
				  p_name:$("#p_name").val(),
				  beginPrice:$("#beginPrice").val(),
				  endPrice:$("#endPrice").val(),
				  position:$("#position").val()
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			});
			return false;
		})
		
		form.on("submit(updateRecommend)",function(){
			$.post("../updategetRemmend",$("#form_updateRecommend").serialize(),function(res){
				layer.msg(res.msg)
				if(res.code=="0"){
					layer.closeAll();
					table.reload("recommend");
				} 
			},"json")
			return false;
		})
		  
		  
		  
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			 
			  if(layEvent === 'detail'){ //查看
				  $("#anNiu").hide();
				  form.val("huixian",{
					  "p_name": data.product.p_name,
					 "p_price":data.product.p_price,
					 "p_img":data.product.p_img
				  })
				  form.val("huixian",data);
				  layer.open({
					  type:1,
					  content:$("#recommend_div"),
					  area:['600px','600px']
				  });
				  
			  } else if(layEvent === 'del'){ //删除
			    layer.confirm('真的删除行么', function(index){
			    	 obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			    	 console.log(obj)
			      $.post("../deleteRemmend",{
			    	  id:obj.data.id
			      },function(res){
			    	  
			    	  layer.msg(res)
			    	  if(res.code=="0"){
			    		  layer.msg("删除成功")
			    	  } else{
			    		  layer.msg("删除失败")
			    	  }
			      },"json")
			        });
			  } else if(layEvent === 'edit'){ //编辑
				  $("#anNiu").show();
				  form.val("hui=xian",{
						 "p_name": data.product.p_name,
						 "p_price":data.product.p_price,
						 "p_img":data.product.p_img
					  })
				  form.val("huiXian",data);
				  layer.open({
					  type:1,
					  content:$("#recommend_div"),
					  area:['600px','600px']
				  });
			  
			  
			  } else if(layEvent === 'LAYTABLE_TIPS'){
			    layer.alert('Hi，头部工具栏扩展的右侧图标。');
			  }
			});
	
	  table.on('edit(test)', function (obj) {
          var value = obj.value;//修改后的数据
          var field = obj.field;//修改的字段名
          var data = obj.data;//修改的当行数据
          //获取修改行的ID值
          var id = data.id  
          
          $.post("../updategetRemmend", {
        	 id:id,
        	 weight:value
          }, function (res) {
            
             layer.msg('[id: '+ id +'] ' + field + ' 字段更改为：'+ value);
              
         });
      });


	 
	  
	});
</script>
</body>
</html>